{% extends "base.html" %}

{% block title %}历史数据{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">历史数据查询</h5>
                </div>
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-4">
                            <label for="point_id" class="form-label">监控点</label>
                            <select class="form-select" id="point_id" name="point_id" required>
                                <option value="">请选择监控点</option>
                                {% for point in points %}
                                <option value="{{ point.id }}" {% if selected_point and selected_point.id == point.id %}selected{% endif %}>
                                    {{ point.name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="start_date" class="form-label">开始日期</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" 
                                   value="{{ start_date }}" required>
                        </div>
                        <div class="col-md-3">
                            <label for="end_date" class="form-label">结束日期</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" 
                                   value="{{ end_date }}" required>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">查询</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% if selected_point %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">{{ selected_point.name }} - 历史数据</h5>
                    <a href="{{ url_for('history.export_data', point_id=selected_point.id, start_date=start_date, end_date=end_date) }}" class="btn btn-success">
                        <i class="fas fa-file-excel me-1"></i>导出Excel
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="dataTable">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>溶解氧(mg/L)</th>
                                    <th>pH值</th>
                                    <th>温度(℃)</th>
                                    <th>氨氮(mg/L)</th>
                                    <th>浊度(NTU)</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in data %}
                                <tr>
                                    <td>{{ item.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                    <td>{{ "%.2f"|format(item.dissolved_oxygen) }}</td>
                                    <td>{{ "%.2f"|format(item.ph_value) }}</td>
                                    <td>{{ "%.1f"|format(item.temperature) }}</td>
                                    <td>{{ "%.2f"|format(item.ammonia_nitrogen) }}</td>
                                    <td>{{ "%.2f"|format(item.turbidity) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script>
function exportToExcel() {
    const table = document.getElementById('dataTable');
    const wb = XLSX.utils.table_to_book(table, {sheet: "数据"});
    const fileName = `{{ selected_point.name if selected_point else '历史数据' }}_${new Date().toISOString().split('T')[0]}.xlsx`;
    XLSX.writeFile(wb, fileName);
}

document.addEventListener('DOMContentLoaded', function() {
    const startDate = document.getElementById('start_date');
    const endDate = document.getElementById('end_date');
    
    startDate.addEventListener('change', function() {
        endDate.min = this.value;
    });
    
    endDate.addEventListener('change', function() {
        startDate.max = this.value;
    });
});
</script>
{% endblock %} 